<%= include ic/admin-header.html %>

<div class="am-cf admin-main">
  <%= include ic/admin-sidebar.html %>

  <!-- content start -->
  <div class="admin-content">

    <div class="am-cf am-padding">
      <div class="am-fl am-cf" style="width:50%;"><strong class="am-text-primary am-text-lg">首页轮播图</strong> / <small>Home Banner</small></div>
    </div>

    <div class="am-g">
      <div class="am-u-sm-12 am-u-md-4">
        <div class="am-input-group am-form-file">
          <div>
            <button id="btn-uploadCover" type="button" class="am-btn am-btn-default am-btn-sm">
              <i class="am-icon-cloud-upload"></i> 新增</button>
          </div>
          <input type="file" id="doc-form-file">
        </div>
      </div>
      <div class="am-u-sm-12 am-u-md-offset-5 am-u-md-3">
        <div class="am-btn-toolbar">
          <div class="am-btn-group am-btn-group-xs">
            <button class="am-btn am-btn-default btn-saveEdit" type="button" onclick="save()">保存修改</button>
          </div>
        </div>
      </div>
    </div>
    <hr />
    <div class="am-g">
      <div class="am-u-sm-12" id="bannerList">
      <% for(var i=0;i<results.length;i++){ %>
      <div val="<%= results[i].imgId %>" class="banner am-cf am-u-sm-12"><span class="am-fl"><img height="80px" src="/p?id=<%= results[i].imgId %>"/></span><span class="am-fl"><br/>链接地址:<br/><input type="text" class="url" value="<%= results[i].url %>" ></span> <span class="am-fr"><a href="javascript:void(0)" onclick="upTag(this)"><i class="am-icon-arrow-up"></i></a><a href="javascript:void(0)" class="btnClose" onclick="delTag(this)"><i class="am-icon-close"></i></a></span></div>
      <% } %>
      <div class="am-u-sm-12 last"></div>
      </div>
    </div>
  </div>
  <!-- content end -->
</div>
<a class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>
<style>
#bannerList{padding-bottom:20px;}
.banner{padding:3px;border:1px solid #999;margin:5px 5px 0 0;background:#eee;color:#333;float:left;}
.banner img{margin-right:10px;}
.banner i{padding:2px 8px;}
.banner .url{width:280px;background:none;border:none;border-bottom:1px solid #111;}
.btnClose{color:#a00;}
</style>
<%= include ic/admin-footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
$(function() {
	$("#collapse-setting").addClass("am-in");
	$("#doc-form-file").on("change",function(e){
		uploadImage2(this.files[0]);
	});
});

function delTag(obj){
  //console.log($(obj).parent().parent(".banner").html());
  $(obj).parent().parent(".banner").remove();
}

function upTag(obj){
  var o=$(obj).parent().parent(".banner");
  $(o).insertBefore($(o).prev());
  //console.log($(obj).parent().parent(".banner").html());
  //$(obj).parent().parent(".banner").remove();
}

function save(){
  $loading.modal('open');
  var bannerArr=[];
  $("#bannerList .banner").map(function(){
    var obj={};
    obj.imgId =$(this).attr("val");
    obj.url   =$.trim($(this).find(".url").val());
    bannerArr.push(obj);
    console.log(obj);
  });
  console.log(bannerArr);
  $.post("./saveBanner", {
    "ajax"			: true,
    "tagArr"		: JSON.stringify(bannerArr)
  },function(data){
    $loading.modal('close');
    //$.AMUI.progress.done();
    $(".btn-saveEdit").removeClass("am-disabled");
    if(typeof(data)=="object" && typeof(data.error)=="undefined"){
      mAlert({
        title:"提示",
        text:"保存成功！",
        onConfirm:function(e) {
          location.reload();
        }
      });
    }else{
      //console.dir(data);
      mAlert({
        title:"错误",
        text:data.error,
        onConfirm:function(e) {}
      });
    }
  }, "json");
}

function uploadImage2(file) {
	$loading.modal('open');
	$("#btn-uploadCover").addClass("am-disabled");
	var reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = function(e){}
	var fd = new FormData();
	fd.append("uploadImg", file);
	var xhr = new XMLHttpRequest();
	xhr.upload.addEventListener("progress", function(evt){
		if (evt.lengthComputable) {
      var percentComplete = Math.round(evt.loaded/ evt.total);
      //progress.set(percentComplete);
    }
	}, false);
	xhr.addEventListener("load", function(evt){
		$loading.modal('close');
		$("#btn-uploadCover").removeClass("am-disabled");
		var img=eval('('+evt.target.responseText+')');
		console.log(evt.target.responseText);
		if(img.success){
      var html='<div val="'+img.id+'" class="banner am-cf am-u-sm-12"><span class="am-fl"><img height="80px" src="/p?id='+img.id+'"/></span><span class="am-fl"><br/>链接地址:<br/><input type="text" class="url" value="" ></span> <span class="am-fr"><a href="javascript:void(0)" onclick="upTag(this)"><i class="am-icon-arrow-up"></i></a><a href="javascript:void(0)" class="btnClose" onclick="delTag(this)"><i class="am-icon-close"></i></a></span></div>';
      $("#bannerList .last").before(html);
		}else{
			mAlert({title:"错误",text:img.msg});
		}
	}, false);
	xhr.addEventListener("error", function(evt){
		$loading.modal('close');
		$("#btn-uploadCover").removeClass("am-disabled");
		mAlert({title:"错误",text:"上传失败！"});
	}, false);
	xhr.addEventListener("abort", function(evt){
		$loading.modal('close');
		$("#btn-uploadCover").removeClass("am-disabled");
	}, false);
	xhr.open("POST", "/admin/uploadImg");
	xhr.send(fd);
}
</script>
